<template>
  <el-container>
    <el-aside width="200px">
      <el-menu
            default-active="2"
            class="el-menu-vertical-demo"
            :router="true"
            @open="onSubmenuOpen"
            @close="onSubmenuClose"
    >
        <el-menu-item index="/manage/messages/toDoList">
          <template slot="title">
            <i class="el-icon-message-solid"></i>
            <span>我的待办
              <el-badge :value="todoCount"  class="item badge-right"></el-badge>
            </span>
          </template>
        </el-menu-item>

      <el-menu-item index="/manage">
        <template slot="title">
          <i class="el-icon-s-home"></i>
          <span>首页</span>
        </template>
      </el-menu-item>

      <el-submenu index="1" >
        <template slot="title">
          <i class="el-icon-location"></i>
          <span>基础数据</span>
        </template>
        <el-menu-item-group>
          <el-submenu index="1-1">
            <template slot="title">
              <i class="el-icon-folder"></i>
              <span>产品信息</span>
            </template>
            <el-menu-item index="/manage/product/add">产品信息</el-menu-item>
            <el-menu-item index="/manage/productCategory/base">产品分类</el-menu-item>
            <el-menu-item index="/manage/product/list">产品信息查询</el-menu-item>
          </el-submenu>
          <el-submenu index="1-2">
            <template slot="title">
              <i class=" el-icon-house"></i>
              <span>仓库信息</span>
            </template>
            <el-menu-item index="/manage/warehouse/add">仓库信息</el-menu-item>
            <el-menu-item index="/manage/warehouse/assistant">仓库辅助表</el-menu-item>
          </el-submenu>

        </el-menu-item-group>
      </el-submenu>

      <el-submenu index="2">
        <template slot="title">
          <i :class="isSubmenuOpen ? 'el-icon-folder-opened' : 'el-icon-folder'"></i>
          <span>供应商管理</span>
        </template>
        <el-menu-item-group>
          <el-submenu index="2-1">
            <template slot="title">供应商准入</template>
            <el-menu-item index="/manage/supplier/list">供应商注册</el-menu-item>
            <el-menu-item index="/manage/supplierEnter/base">供应商准入</el-menu-item>
            <el-menu-item index="/manage/supplierSign">供应商签约</el-menu-item>
            <el-menu-item index="/manage/supplierEnterRule/base"><i class="el-icon-tickets"></i>供应商准入条例</el-menu-item>

          </el-submenu>
          <el-submenu index="2-2">
            <template slot="title">供应商信息</template>
            <el-menu-item index="/manage/product/ProductSupplier/add">供应商价格</el-menu-item>
            <el-menu-item index="/manage/supplierDeliverPerson/add">供应商送货信息</el-menu-item>
<!--            <el-menu-item index="2-2-3">供应商档案</el-menu-item>-->
            <el-menu-item index="/manage/supplier/samplemanagement">样品管理</el-menu-item>
          </el-submenu>
          <el-menu-item index="/manage/supplier/supplierMessageSearch">供应商信息查询</el-menu-item>
        </el-menu-item-group>
      </el-submenu>
      <!--       -->
        <el-submenu  index="3">
          <template slot="title">
            <i :class="isSubmenuOpen ? 'el-icon-folder-opened' : 'el-icon-folder'"></i>
            <span>采购管理</span>
          </template>
          <el-menu-item-group>
            <el-menu-item index="/manage/purchaseApply/add">
              <template slot="title">采购申请</template>
            </el-menu-item>
            <el-menu-item index="/manage/purchase/purchaseNeedPool">
              <template slot="title">采购需求池</template>
            </el-menu-item>
<!--            <el-menu-item index="3-3">-->
<!--              <template slot="title">采购询报价</template>-->
<!--            </el-menu-item>-->
            <el-menu-item index="/manage/purchase/order">
              <template slot="title">采购订单</template>
            </el-menu-item>
            <el-menu-item index="/manage/purchase/supplierDeliverGoods/add">
              <template slot="title">供应商送货单</template>
            </el-menu-item>
<!--            <el-menu-item index="3-6">-->
<!--              <template slot="title">采购入库</template>-->
<!--            </el-menu-item>-->
<!--            <el-menu-item index="3-7">-->
<!--              <template slot="title">采购退货</template>-->
<!--            </el-menu-item>-->
<!--            <el-menu-item index="3-8">-->
<!--              <template slot="title">采购需求统计</template>-->
<!--            </el-menu-item>-->
<!--            <el-menu-item index="3-8">-->
<!--              <template slot="title">采购订单统计</template>-->
<!--            </el-menu-item>-->
          </el-menu-item-group>
        </el-submenu>
<!--        -->
        <el-submenu  index="4">
          <template slot="title">
            <i :class="isSubmenuOpen ? 'el-icon-folder-opened' : 'el-icon-folder'"></i>
            <span>库存管理</span>
          </template>
          <el-menu-item-group>
<!--            <el-menu-item index="4-1">-->
<!--              <template slot="title">其他入库单</template>-->
<!--            </el-menu-item>-->
<!--            <el-menu-item index="4-2">-->
<!--              <template slot="title">其他出库单</template>-->
<!--            </el-menu-item>-->
            <el-menu-item index="/manage/warehouseAllocate">
              <template slot="title">库存调拨</template>
            </el-menu-item>
<!--            <el-menu-item index="4-4">-->
<!--              <template slot="title">库存盘点</template>-->
<!--            </el-menu-item>-->

          </el-menu-item-group>
        </el-submenu>
<!--        -->
        <el-submenu  index="5">
          <template slot="title">
            <i :class="isSubmenuOpen ? 'el-icon-folder-opened' : 'el-icon-folder'"></i>
            <span>财务管理</span>
          </template>
          <el-menu-item-group>
            <el-menu-item index="5-1">
              <template slot="title">进项发票</template>
            </el-menu-item>
            <el-menu-item index="5-2">
              <template slot="title">付款单</template>
            </el-menu-item>
            <el-menu-item index="5-3">
              <template slot="title">费用报销</template>
            </el-menu-item>
            <el-menu-item index="5-4">
              <template slot="title">收款单</template>
            </el-menu-item>
            <el-menu-item index="5-5">
              <template slot="title">资金账户</template>
            </el-menu-item>
            <el-menu-item index="5-6">
              <template slot="title">财务收支看板</template>
            </el-menu-item>
          </el-menu-item-group>
        </el-submenu>


        <el-menu-item index="/manage/about">
          <i class="el-icon-menu"></i>
          <span slot="title">关于</span>
        </el-menu-item>
        <el-menu-item index="/">
          <i class="el-icon-switch-button"></i>
          <span slot="title">退出</span>
        </el-menu-item>
      </el-menu>
      </el-aside>
      <el-container>
        <el-header>采购供应链管理</el-header>
        <el-main>
          <router-view></router-view>
        </el-main>
        <el-footer>Footer</el-footer>
      </el-container>
    </el-container>
</template>

<script>
// @ is an alias to /src
import HelloWorld from '@/components/HelloWorld.vue'
export default {
  name: 'HomeView',
  components: {
    HelloWorld
  },
  data() {
    return {
      isSubmenuOpen: false,
      todoCount: '',
    };
  },
  created() {
    this.getTodoCount();
  },
  methods: {

    getTodoCount() {
      this.$axios.get("manage/supplier/innerList").then(
              response=>{
                this.todoCount=response.data.length;
              }
      ).catch(error => {
        console.error('获取代办数量失败', error);
      });
    },
  }
}
</script>

<style>
body {
  margin: 0;
  padding: 0;
  font-family: Arial, sans-serif;
  background-color: #f0f4f8;
}

/* 头部样式 */
.el-header {
  background: linear-gradient(to right, rgb(240, 242, 240), rgb(0, 12, 64));
  color: #fff;
  text-align: center;
  line-height: 60px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  border-right: 3px solid #EBEEF5;
}

/* 侧边栏样式 */
.el-aside {
  background-color: #2c3e50;
  color: #fff;
  text-align: left;
  line-height: 100%;
  border-right: 3px solid #EBEEF5;
  display: flex;
}

.el-menu {
  overflow-x : hidden;
  width: 100%;
  border-right: none;
}

.el-menu-item, .el-submenu__title {
  overflow : hidden;
  color: #fff;
}

.el-menu-item:hover, .el-submenu__title:hover {
  background-color: #909399;
}

/* 主体内容样式 */
.el-main {
  background-color: #F2F6FC;
  color:#000;
  border-right: 3px solid #EBEEF5;
  overflow: hidden;
  /*text-align: center;*/
  /*line-height: 160px;*/
}

/* 底部样式 */
.el-footer {
  background: linear-gradient(to right, rgb(240, 242, 240), rgb(0, 12, 64));
  color: #fff;
  text-align: center;
  line-height: 60px;
  box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.1);
  border-right: 3px solid #EBEEF5;
  border-top: 3px solid #EBEEF5;
}

/* 容器样式 */
.el-container {
  overflow : hidden;
  height: 100vh;
  color: #F2F6FC;
}

/* 额外的样式 */
.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
  line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
  line-height: 320px;
}
/*代办数量提示*/
.badge-right {
  float: right; /* 使徽章浮动到右侧 */
}
</style>